@import url(lib.less);
@import url(reset.less);
//内边距
@i-padding: 20px;
//外边距
@o-margin: 20px;
//主题色
@t-color: #4CAF50;
@t-color-dark: #3E9D41;
//背景色
@bg-color: #E6E8EA;
@menu-bg-color: #181D20;
@bar-bg-color: #fff;
//边框颜色
@bc: #e7ecef;
@active:#F1F1F1;
@b-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
//块高度
@block-height: 30px;
//主题色
@tc:#2cabc4;
.bgs(@x:0, @y:0){
	.bg('icon.png',no-repeat, @x @y);
}
body{font-size: 14px; position: absolute; top: 0; left: 0; height: 100%; width: 100%;}
select{ border: 0; border-bottom: 2px solid @tc; border-radius: 2px; .di; padding: 2px 5px; .lh(30px);margin-right: 10px;
	option{ .lh(30px)}
}
//清除浮动 内置fl,fr
.cf{ .cf;}
//行内元素 居中
.di{ .di;}
//超出后隐藏
.omit{ .omit;}
//默认200毫秒
.trs{ .trs}
//  500毫秒
.trs500{ .trs500}
.wrap{ width: 1160px; padding: 0 20px; margin: 0 auto;}

.f-select{
	position: relative;
	.f-s{position: relative; padding-left: 10px;
		.tra{.triangle; border-top: 5px solid #ccc; border-left-width: 5px; border-right-width: 5px; position: absolute; right: 10px; top: 25px;}
	}
	&:hover{
		.f-list{ display: block;}
		.f-s{
			.tra{ border-top: 0; border-bottom: 5px solid #ccc;}
		}
	}
	.f-list{ position: absolute; top: 100%; left: 0; background-color: #fff; width: 100%; display: none; .box-shadow(2px 2px 3px rgba(0, 0, 0, 0.15));
		p{line-height: 35px; padding-left: 10px; cursor: pointer;
			&:hover{background-color: #ddd;}
		}
	}
}

.m-header{
	background-color: #2cabc4; padding: 5px;
	.logo{ width: 100px; height: 49px; .bg('logo.png');  display: block;}
	.car{position: relative;
		.num{background-color: #e4393c; position: absolute; top: 5px; left: 20px; color: #fff; width: 20px; height: 20px; line-height: 20px; text-align: center; .border-radius(50%)}
	}
	.car .icon{ .bgs(); width: 30px; height: 30px; display: block; cursor: pointer; margin-top: 10px; margin-right: 40px;}
	.msg .icon{ .bgs(-44px, 0); width: 30px; height: 30px; display: block; cursor: pointer; margin-top: 10px; margin-right: 40px;}
	.user{ margin-right: 10px;
		img{ .border-radius(50%); border:2px solid #fff;}
	}
}
.m-footer{ background-color: #252729; color: #fff;
	a{color: #fff;}
	.upter{border-bottom: 1px solid gray; padding: 50px 0;
		h3{ text-align: center; font-size: 30px;}
		p{text-align: center; padding: 20px 0;}
		form{ width: 650px; .lh(40px); margin: 10px auto;}
		.text{ width: 420px; padding: 5px; line-height: 28px; height: 28px;}
		.submit{ height: 40px; line-height: 40px; border:0; background-color: #ff5722; color: #fff; width: 218px; cursor: pointer;}
	}
	.inter{ padding: 50px 0; 
		.links{ border-bottom: 1px solid gray; padding-bottom: 20px; margin-bottom: 20px;
			a{ padding: 0 10px;}
		}
		.logo{ width: 290px; text-align: center;
			a{.bg('logo.png'); width: 100px; height: 49px; display: block; margin: 0 auto;}
		}
		.infos{width: 1024px - 290px;}
		.address{ color: gray;}
	}
	.wrap{ width: 1024px; margin: 0 auto;

	}
}

.pub-search{ background-color: #e0f4ff; padding: 20px 0;
	.bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; .op(50);}
	form{ width: 955px; height: 53px; background-color: #fff; border-radius: 2px; margin: 0 auto;
		line-height: 53px;
		.address{ position: relative; width: 443px; border-right: 1px solid #ccc;
			.icon{ .bgs(-96px, 0); width: 25px; height: 32px; position: absolute; top: 10px; left: 10px;}
			input{ margin-left: 45px; width: 300px; .lh(28px); border: 0;}
		}
		.date{ width: 229px; border-right: 1px solid #ccc; position: relative;
			.icon{.bgs(-144px, -4px); width: 28px; height: 28px; position: absolute; top: 13px; left: 10px;}
			.f-s{padding-left: 50px;}
		}
		.seats{ width: 145px;}
		.sub{ width: 136px;
			input{ width: 100%; .lh(53px); background-color: #ff5722; border:0; font-size: 16px; border-radius: 0 2px 2px 0; color: #fff; cursor: pointer;
				&:hover{ background-color: darken(#ff5722, 10%)}
			}
		}
	}
}

.page-cut{text-align: center; margin-top: 20px; margin-bottom: 20px; font-size: 0;
	a,span{font-size: 14px;}
	a{border:1px solid @bc; margin-right: -1px; padding: 0 10px;}
	.current{background-color: @tc; color: #fff; border-color: @tc;}
	.umbn{margin: 0 10px;}
}
.p-index{
	.pub-search{ position: absolute; bottom: 0; left: 0;width: 100%; height: 120px; background-color: transparent; padding: 0; margin: 0;
		form{position: relative; z-index: 1; margin: 35px auto 0 auto;}
	}
	.line{ background-color: #333333; width: 50px; height: 3px; margin: 10px auto;}
	.banner{height: 820px; .bgt("banner.jpg"); background-position: center; background-size: cover; position: relative;
		.header{ height: 40px;
			.logo{.bg('logo.png'); width: 100px; height: 49px; margin-left: 33px; margin-top: 20px;}
			.user{ margin-top: 20px; margin-right: 33px;}
			.l-btn{ border:1px solid #bfbfbf; color: #bfbfbf; width: 98px; text-align: center; .lh(28px); border-radius: 2px; margin-right: 20px;}
			.msg{ width: 28px; height: 24px; .bgs(-45px, -4px);}
		}
		
	}
	.dads{ height: 120px; background-color: #22b698;}
	.target{
		background-color: #f6f6f6; padding: 75px 0;
		.inner{overflow: hidden; width: 1170px; margin: 0 auto;}
		ul{ margin-right: -15px; margin-bottom: -15px; .cf;}
		li{width: 380px; margin-right: 15px; margin-bottom: 20px; float: left; text-align: center; background-color: #fff;
			padding-top: 60px; height: 320px;
			.icon{margin-bottom: 10px;}
			h3{color: #333333; font-weight: bold;}
			
			.content{padding: 40px;}
		}
		a{display: block; color: #333;}
		.icon{width: 43px; height: 43px; display: block; margin: 0 auto;}
		.kj{.icon{.bgs(-4px, -53px)}}
		.jl{.icon{.bgs(-60px, -53px)}}
		.hd{ .icon{.bgs(-112px, -53px)}}
		.kh{.icon{.bgs(-186px, -53px)}}
		.bt{.icon{.bgs(-251px, -52px)}}
		.jy{.icon{.bgs(-314px, -54px)}}
	}
	.kh-say{ padding-top: 70px; padding-bottom: 50px;
		h2{ text-align: center; font-size: 30px;}
		.wrapper{width:1170px; margin: 0 auto;}
		ul{margin-right: -10px; margin-bottom: -10px; margin-top: 30px;}
		li{margin: 0 10px 10px 0;}
	}
	.hz-part{
		h2{ text-align: center; font-size: 30px;}
		.wrapper{width:1170px; margin: 0 auto;}
		ul{margin-right: -10px; margin-bottom: -10px; margin-top: 30px;}
		li{margin: 0 10px 10px 0; text-align: center; width: 226px;}
	}
	.new-activity{
		width: 1375px; margin: 0 auto; overflow: hidden; padding: 50px;
		h2{text-align: center; margin: 50px 0 20px; font-size: 30px;}
		ul{margin-right: -25px}
		li{width: 325px; height: 492px; margin-right: 25px; text-align: center; position: relative;
			a{display: block; padding-top: 320px;}
			img{position: absolute; top: 0; left: 0;}
			h3,div{position: relative; z-index: 1; color: #fff;}
			h3{ font-size: 30px; font-weight: bold;}
			.content{ padding: 0 40px; margin-bottom: 20px;}
			.date{ font-size: 16px;}
		}
	}
}

.p-list{
	.filter-bar{border:1px solid @bc; padding: 0 18px; margin-bottom: 20px; margin-top: 20px;
		ul{border-top: 1px dashed @bc; line-height: 40px;
			&:first-child{border-top:0;}
			.title{width: 50px; text-align: right; }
			.list{margin-left: 70px;
				a, label{margin-right: 30px;}
			}
		}
	}
	.sort-bar{
		border:1px solid @bc; .cf; margin-bottom: 20px; .lh(30px);
		a{float: left; border-right: 1px solid @bc; width: 100px; text-align: center;}
		.current{border-top:2px solid @tc; position: relative; z-index: 1; top: -1px;}
		.arr{width: 10px; height: 30px; position: relative;}
		.arr-up{.triangle; border-bottom: 5px solid @tc; border-right-width: 5px; border-left-width: 5px;  position: absolute; top: 5px; left:0;}
		.arr-down{.triangle; border-top: 5px solid @tc; border-right-width: 5px; border-left-width: 5px;  position: absolute; top: 15px; left: 0;}
	}
	.list{width: 820px;
		.item{margin-bottom: 40px; padding: 20px; border:1px solid @bc; position: relative;
			.head{padding-bottom: 20px; border-bottom: 1px dashed @bc;
				img{width: 208px;}
				.iconlocation{width: 24px; height: 32px; .bgs(-291px, 0); margin: 0 10px;}
				h2{font-weight: bold; color: @tc;}
				.price{color: @tc; font-size: 12px;
					strong{font-size: 20px;}
				}
			}
			li{border-bottom: 1px dashed @bc; .cf; padding: 5px 20px 5px 0;
				span,a{float: left;}
				.zw{ width: 200px;}
				.gw{ width: 100px;}
				.ls{ width: 100px;}
				.pr{ width: 100px; font-weight: bold; color: @tc;}
				.md{ width: 120px;}
				.yd{ float: right; background-color: #ff5722; color: #fff; padding: 0 20px; font-size: 12px; border-radius: 2px;}
			}
			.show-more{position: absolute; left: 50%; bottom: -30px; line-height: 30px; border:1px solid @bc; border-top-width: 0; width: 120px; text-align: center; margin-left: -60px;
				.box-shadow(2px 2px 3px rgba(0, 0, 0, 0.05));
				.arr{.triangle; margin-left: 5px; border-top: 5px solid @tc; border-left-width: 5px; border-right-width: 5px; position: relative; top: 2px;}
			}
		}
	}
	.acp{
		.on-map{margin-bottom: 20px}
	}
}
